<template>
  <div>
    <div class="product" id="product"></div>
  </div>
</template>

<script>
const data = {
  products: [],
  isLoading: true,
  scenes: [],
  pIndex: 0,
  sceneIndex: 0,
  base3d: {},
  descIndex: 0,
  progress: 0,
};
import Base3d from "../utils/Base3d";
export default {
  data() {
    return {
      ...data,
    };
  },
  methods: {
    async init() {
      const prod = function () {
        return new Promise((resolve, rejct) => {
          setTimeout(function () {
            resolve({
              result: "ok",
              list: [
                {
                  id: 7589,
                  title: "GUCCI 古驰新款女包",
                  imgsrc: "./imgs/bag.png",
                  price: 17899,
                  modelPath: "./files/gltf/",
                  modelName: "bag2.glb",
                  desc: [
                    {
                      title: "与一款全新的邮差包设计。",
                      content: "该系列手袋同时推出摩登廓形的水桶包款式",
                    },
                    {
                      title: "向60年前古驰的经典手袋致敬。",
                      content: "Gucci 1955马衔扣系列手袋延续经典手袋线条与造型",
                    },
                    {
                      title: "手袋结构设计精巧",
                      content: "搭配可调节长度的肩带，肩背或斜挎皆宜。",
                    },
                    {
                      title: "GUCCI 1955马衔扣系列手袋",
                      content:
                        "标志性的马衔扣设计源于马术运动，由金属双环和一条衔链组合而成。",
                    },
                  ],
                },
                {
                  id: 7590,
                  title: "Macbook Pro",
                  imgsrc: "./imgs/macpro.jpg",
                  price: 25899,
                  modelPath: "./files/gltf/",
                  modelName: "Macbookpro2.glb",
                  desc: [
                    {
                      title: "超高速M1 Pro和M1 Max芯片",
                      content: "带来颠覆性表现和惊人续航",
                    },
                    {
                      title: "炫目的Liquid视网膜XDR显示屏",
                      content: "Macbookpro各类强大端口也都整装就位",
                    },
                    {
                      title: "战力更猛，耐力也更强！",
                      content: "无论是剪辑8K视频、编译代码都能随时随地轻松搞定",
                    },
                    {
                      title: "Pro到MAX，霸气不封顶",
                      content:
                        "图形处理器速度最高提升至4倍，机器学习性能提升至5倍",
                    },
                  ],
                },
                {
                  id: 7591,
                  title: "水晶凉鞋女细跟",
                  imgsrc: "./imgs/womenshoes.jpg",
                  price: 17899,
                  modelPath: "./files/gltf/",
                  modelName: "shoes.glb",
                  desc: [
                    { title: "白变女神季", content: "性感潮品、优雅轻淑范！" },
                    {
                      title: "舒适、焕新",
                      content: "手感光滑、富有弹性、舒适一整天",
                    },
                    {
                      title: "个性、魅力",
                      content: "水晶搭配金属，凸显柔美气质",
                    },
                    {
                      title: "全透、高端水晶",
                      content: "每一处的细节，都很到位!",
                    },
                  ],
                },
              ],
              hdr: ["000", "080", "079", "077", "076", "067"],
            });
          }, 1500);
        });
      };
      let result = await prod();
      console.log(result);
      //   data.isLoading = false;
      data.products = result.list;
      data.scenes = result.hdr;
      data.base3d = new Base3d("#product", function () {});
      data.base3d.onProgress((e) => {
        let progressNum = e.loaded / e.total;
        progressNum = progressNum.toFixed(2) * 100;
        data.progress = progressNum;
        // console.log(progressNum);
      });
    },
  },
  mounted() {
    this.init();

    window.addEventListener("mousewheel", (e) => {
      //   console.log(e);
      // if (e.deltaY > 0) {
      //   store.commit("setFullscreen", true);
      // }
      // if (e.deltaY < 0) {
      //   store.commit("setFullscreen", false);
      // }
    });

    window.addEventListener("mousewheel", (e) => {
      let duration = data.base3d.animateAction._clip.duration;
      let time = data.base3d.animateAction.time;
      let index = Math.floor((time / duration) * 4);
      data.descIndex = index;
    });
  },
};
</script>

<style lang="scss" scoped>
.desc {
  position: fixed;
  z-index: 100000;
  background-color: rgba(255, 255, 255, 0.5);
  width: 600px;
  top: 100px;
  left: 50%;
  margin-left: -300px;
  transition: all 0.5s;

  transform: translate(-100vw, 0);
  padding: 15px;
}
.desc.active {
  transform: translate(0, 0);
}
.prod-list {
  width: 300px;
  height: 100vh;
  padding: 60px 0 0;
  position: fixed;
  z-index: 100000;
  transition: all 0.5s;
  background-color: rgba(255, 255, 255, 0.8);
  left: 0;
  top: 0;
  h1 {
    font-size: 20px;
    font-weight: 900;
    padding: 10px 25px 0;
  }
  .products {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .prod-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 250px;
      background-color: #fff;
      border-radius: 20px;
      overflow: hidden;
      margin: 10px 0;
      box-shadow: 2px 2px 5px #666;
      transition: all 0.3s;
      &.active {
        box-shadow: 2px 2px 5px #666, 0px 0px 10px red;
      }
      &:hover {
        transform: translate(0px, -5px);
        box-shadow: 2px 2px 5px #666, 0px 0px 10px orangered;
        // background-color: orange;
      }
      img {
        width: 190px;
      }
      .prod-title {
        padding: 0 20px;
      }
    }
  }
}
.prod-list.hidden {
  transform: translate(-100%, 0);
}
.scene-list {
  width: 300px;
  height: 100vh;
  padding: 60px 0 0;
  position: fixed;
  z-index: 100000;
  transition: all 0.5s;
  background-color: rgba(255, 255, 255, 0.8);
  right: 0;
  top: 0;
  h3 {
    font-size: 20px;
    font-weight: 900;
    padding: 0 30px;
  }
  .scenes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .scene-item {
    padding: 6px 0;

    img {
      width: 250px;
      border-radius: 10px;
      box-shadow: 2px 2px 10px #666;
      transition: all 0.3s;
      &.active {
        box-shadow: 2px 2px 5px #666, 0px 0px 10px red;
      }
      &:hover {
        transform: translate(0px, -5px);
        box-shadow: 2px 2px 5px #666, 0px 0px 10px orangered;
      }
    }
  }
}
.scene-list.hidden {
  transform: translate(100%, 0);
}
</style>
